<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="vue.js"></script>
    <script src="jquery.js"></script>
    <title>Document</title>
    <style>
        body {
            margin: 0;
        }

        .first {
            width: 600px;
            height: 5px;
            border: 1px solid #000;
            margin: 50px 0 0 0;
        }

        .second {
            width: 15px;
            height: 15px;
            border: 1px solid #000;
            border-radius: 50%;
            top: -11.5px;
            position: relative;
        }
    </style>
</head>

<body>
    <main id="app">
        <input type="text" v-model='name'>
        <first-com v-model='name'></first-com>
    </main>
    <script id="first" type="text/html">
        <main>
            <div class='first' @click='first()'></div>
            <div class='second' :style='left' @mousedown='second()'></div>
        </main>
    </script>
    <script>
        var content 
        Vue.component('first-com', {
            template: '#first',
            data: function () {
                return {
                    number: this.value
                }
            },
            props: ['value'],
            methods: {
                first: function ($event) {
                    if (event.clientX > 600) {
                        return
                    }
                    this.number = event.clientX
                    this.$emit('input', (this.number / 6))
                },
                second: function () {
                    var than = this
                    content = false
                    $('.second').on('mousemove', function ($event) {
                        if (content == true) {
                            return
                        }
                        this.number = (event.clientX / 6) - 2
                        than.$emit('input', (this.number))
                    })
                    $('.second').on('mouseup', function () {
                        content = true
                    })
                }
            },
            watch: {
                value: function () {
                    if (this.value > 100) {
                        this.number = 600
                    }
                    else {
                        this.number = this.value * 6
                    }
                }
            },
            computed: {
                left: function () {
                    return {
                        left: this.number + 'px'
                    }
                }
            }
        })
        var vue = new Vue({
            el: '#app',
            data: {
                name: ''
            }
        })
    </script>
</body>

</html>